<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <head th:include="include :: header"></head>
</head>

<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="role-form">
                <div class="select-list">
                    <ul>
                        <li>
                            接口编码：<input type="text" name="interfaceCode"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>
    <div th:include="include :: footer"></div>
    <script>
       var prefix ="/function";
       $(function() {
           var options = {
               url: prefix + "/list",
               modalName: "接口服务列表",
               search: false,
               showExport: true,
               columns: [{
                   radio: true
               },
                   {
                       field : 'appCode',
                       title : '应用名称',
                       visible: true
                   },
                   {
                       field : 'count',
                       title : '切量次数',
                       visible: true
                   },
                   {
                       field : 'interfaceCode',
                       title : '接口编码',
                       visible: true
                   },
                   {
                       visible: true,
                       title: '接口开关',
                       align: 'center',
                       formatter: function (value, row, index) {
                           return statusTools(row);
                       }
                   },
                   {
                       title: '操作',
                       align: 'center',
                       formatter: function(value, row, index) {
                           var actions = [];
                           actions.push('<a class="btn btn-success btn-xs  href="#" onclick="rule(\'' + row.appCode + '\',\'' + row.interfaceCode + '\')"><i class="fa fa-edit"></i>规则配置</a> ');
                           return actions.join('');
                       }
                   }]
           };
           $.table.init(options);
       });

       /* 系统状态显示 */
       function statusTools(row) {
           if (row.grayscaleSwitch == true) {
               return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.appCode + '\',\'' + row.interfaceCode + '\')"></i> ';
           } else {
               return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.appCode + '\',\'' + row.interfaceCode + '\')"></i> ';
           }
       }
       /* 启动 */
       function enable(appCode,interfaceCode) {
           $.modal.confirm("确认要启用服务吗？", function() {
               $.operate.post(prefix + "/changeSwitch", { "appCode": appCode,"interfaceCode": interfaceCode,"grayscaleSwitch": true });
           })
       }
       /* 启关闭 */
       function disable(appCode,interfaceCode) {
           $.modal.confirm("确认要关闭服务吗？", function() {
               $.operate.post(prefix + "/changeSwitch", { "appCode": appCode,"interfaceCode": interfaceCode,"grayscaleSwitch": false });
           })
       }

       /**接口列表*/
       function rule(appCode,interfaceCode) {
           createMenuItem("/functionRule?appCode="+encodeURIComponent(appCode)+"&interfaceCode="+encodeURIComponent(interfaceCode), "规则配置","rules");
       }

    </script>
</body>

</html>
